<!doctype html>
<html class="default no-js">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>CatPalette | @businessanalytics/customvis-lib</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<header>
	<div class="tsd-page-toolbar">
		<div class="container">
			<div class="table-wrap">
				<div class="table-cell" id="tsd-search" data-index="../assets/js/search.js" data-base="..">
					<div class="field">
						<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
						<input id="tsd-search-field" type="text" />
					</div>
					<ul class="results">
						<li class="state loading">Preparing search index...</li>
						<li class="state failure">The search index is not available</li>
					</ul>
					<a href="../index.html" class="title">@businessanalytics/customvis-lib</a>
				</div>
				<div class="table-cell" id="tsd-widgets">
					<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
				</div>
			</div>
		</div>
	</div>
	<div class="tsd-page-title">
		<div class="container">
			<ul class="tsd-breadcrumb">
				<li>
					<a href="../globals.html">Globals</a>
				</li>
				<li>
					<a href="catpalette.html">CatPalette</a>
				</li>
			</ul>
			<h1>Class CatPalette</h1>
		</div>
	</div>
</header>
<div class="container container-main">
	<div class="row">
		<div class="col-8 col-content">
			<section class="tsd-panel tsd-comment">
				<div class="tsd-comment tsd-typography">
					<div class="lead">
						<p>Representation of a categorical palette. Can be used to determine a color given
						a data tuple.</p>
					</div>
				</div>
			</section>
			<section class="tsd-panel tsd-hierarchy">
				<h3>Hierarchy</h3>
				<ul class="tsd-hierarchy">
					<li>
						<span class="target">CatPalette</span>
					</li>
				</ul>
			</section>
			<section class="tsd-panel-group tsd-index-group">
				<h2>Index</h2>
				<section class="tsd-panel tsd-index-panel">
					<div class="tsd-index-content">
						<section class="tsd-index-section ">
							<h3>Accessors</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-get-signature tsd-parent-kind-class"><a href="catpalette.html#slot" class="tsd-kind-icon">slot</a></li>
							</ul>
						</section>
						<section class="tsd-index-section ">
							<h3>Methods</h3>
							<ul class="tsd-index-list">
								<li class="tsd-kind-method tsd-parent-kind-class"><a href="catpalette.html#getcolor" class="tsd-kind-icon">get<wbr>Color</a></li>
								<li class="tsd-kind-method tsd-parent-kind-class"><a href="catpalette.html#getfillcolor" class="tsd-kind-icon">get<wbr>Fill<wbr>Color</a></li>
								<li class="tsd-kind-method tsd-parent-kind-class"><a href="catpalette.html#getoutlinecolor" class="tsd-kind-icon">get<wbr>Outline<wbr>Color</a></li>
							</ul>
						</section>
					</div>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Accessors</h2>
				<section class="tsd-panel tsd-member tsd-kind-get-signature tsd-parent-kind-class">
					<a name="slot" class="tsd-anchor"></a>
					<h3>slot</h3>
					<ul class="tsd-signatures tsd-kind-get-signature tsd-parent-kind-class">
						<li class="tsd-signature tsd-kind-icon"><span class="tsd-signature-symbol">get</span> slot<span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<div class="lead">
									<p>Returns the name of the slot this palette is linked to, or null if the palette
									is not linked to a slot.</p>
								</div>
							</div>
							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span>
								<span class="tsd-signature-symbol"> | </span>
								<span class="tsd-signature-type">null</span>
							</h4>
						</li>
					</ul>
				</section>
			</section>
			<section class="tsd-panel-group tsd-member-group ">
				<h2>Methods</h2>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
					<a name="getcolor" class="tsd-anchor"></a>
					<h3>get<wbr>Color</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
						<li class="tsd-signature tsd-kind-icon">get<wbr>Color<span class="tsd-signature-symbol">(</span>_tuple<span class="tsd-signature-symbol">: </span><a href="tuple.html" class="tsd-signature-type">Tuple</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="color.html" class="tsd-signature-type">Color</a></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<div class="lead">
									<p>Determine a color given a tuple.</p>
								</div>
							</div>
							<h4 class="tsd-parameters-title">Parameters</h4>
							<ul class="tsd-parameters">
								<li>
									<h5>_tuple: <a href="tuple.html" class="tsd-signature-type">Tuple</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>The tuple to determine the color for or null to get a default color.</p>
									</div>
								</li>
							</ul>
							<h4 class="tsd-returns-title">Returns <a href="color.html" class="tsd-signature-type">Color</a></h4>
							<p>The color of the tuple.</p>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
					<a name="getfillcolor" class="tsd-anchor"></a>
					<h3>get<wbr>Fill<wbr>Color</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
						<li class="tsd-signature tsd-kind-icon">get<wbr>Fill<wbr>Color<span class="tsd-signature-symbol">(</span>_e<span class="tsd-signature-symbol">: </span><a href="datapoint.html" class="tsd-signature-type">DataPoint</a><span class="tsd-signature-symbol"> | </span><a href="tuple.html" class="tsd-signature-type">Tuple</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<div class="lead">
									<p>Determine the fill color for a data point. The fill follows the &#39;selected&#39;
										state of a data point. If the data set has selected data points, then the
										ones that are selected get the normal color as fill color and the ones that
									are not selected get a 60% transparent color.</p>
								</div>
								<pre><code class="language-typescript"><span class="hljs-comment">// Set fill color of elements in a d3 selection.</span>
selection.attr( <span class="hljs-string">"fill"</span>, _d =&gt; palette.getFillColor( _d ) )</code></pre>
							</div>
							<h4 class="tsd-parameters-title">Parameters</h4>
							<ul class="tsd-parameters">
								<li>
									<h5>_e: <a href="datapoint.html" class="tsd-signature-type">DataPoint</a><span class="tsd-signature-symbol"> | </span><a href="tuple.html" class="tsd-signature-type">Tuple</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>The data point or tuple to determine the color for. If <code>null</code> is
										passed, the method behaves the same as <a href="catpalette.html#getcolor">getColor</a>.</p>
									</div>
								</li>
							</ul>
							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span></h4>
							<p>The color of the data point as a string.</p>
						</li>
					</ul>
				</section>
				<section class="tsd-panel tsd-member tsd-kind-method tsd-parent-kind-class">
					<a name="getoutlinecolor" class="tsd-anchor"></a>
					<h3>get<wbr>Outline<wbr>Color</h3>
					<ul class="tsd-signatures tsd-kind-method tsd-parent-kind-class">
						<li class="tsd-signature tsd-kind-icon">get<wbr>Outline<wbr>Color<span class="tsd-signature-symbol">(</span>_e<span class="tsd-signature-symbol">: </span><a href="datapoint.html" class="tsd-signature-type">DataPoint</a><span class="tsd-signature-symbol"> | </span><a href="tuple.html" class="tsd-signature-type">Tuple</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></li>
					</ul>
					<ul class="tsd-descriptions">
						<li class="tsd-description">
							<div class="tsd-comment tsd-typography">
								<div class="lead">
									<p>Determine the outline color for a data point. The outline color depends on
										both the &#39;highlight&#39; state and the &#39;selected&#39; state. If the point is neither
										highlighted or selected, <code>null</code> is returned to indicate that no outline needs
										to be rendered. If the point is highlighted or part of a selection, then
									the returned color is a darker version of the actual data point color.</p>
								</div>
								<pre><code class="language-typescript"><span class="hljs-comment">// Set outline color of elements in a d3 selection.</span>
selection.attr( <span class="hljs-string">"stroke"</span>, _d =&gt; palette.getOutlineColor( _d ) )</code></pre>
							</div>
							<h4 class="tsd-parameters-title">Parameters</h4>
							<ul class="tsd-parameters">
								<li>
									<h5>_e: <a href="datapoint.html" class="tsd-signature-type">DataPoint</a><span class="tsd-signature-symbol"> | </span><a href="tuple.html" class="tsd-signature-type">Tuple</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span></h5>
									<div class="tsd-comment tsd-typography">
										<p>The data point or tuple to determine the color for. If <code>null</code> is
										passed, the method behaves the same as <a href="catpalette.html#getcolor">getColor</a>.</p>
									</div>
								</li>
							</ul>
							<h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">string</span>
								<span class="tsd-signature-symbol"> | </span>
								<span class="tsd-signature-type">null</span>
							</h4>
							<p>The color of the data point as a string or null if no outline is needed.</p>
						</li>
					</ul>
				</section>
			</section>
		</div>
		<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
			<nav class="tsd-navigation primary">
				<ul>
					<li class="globals  ">
						<a href="../globals.html"><em>Globals</em></a>
					</li>
				</ul>
			</nav>
			<nav class="tsd-navigation secondary menu-sticky">
				<ul class="before-current">
					<li class=" tsd-kind-enum">
						<a href="../enums/fontstyle.html" class="tsd-kind-icon">Font<wbr>Style</a>
					</li>
					<li class=" tsd-kind-enum">
						<a href="../enums/fontweight.html" class="tsd-kind-icon">Font<wbr>Weight</a>
					</li>
					<li class=" tsd-kind-enum">
						<a href="../enums/formattype.html" class="tsd-kind-icon">Format<wbr>Type</a>
					</li>
					<li class=" tsd-kind-enum">
						<a href="../enums/lengthunit.html" class="tsd-kind-icon">Length<wbr>Unit</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="catencoding.html" class="tsd-kind-icon">Cat<wbr>Encoding</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="catencodingentry.html" class="tsd-kind-icon">Cat<wbr>Encoding<wbr>Entry</a>
					</li>
				</ul>
				<ul class="current">
					<li class="current tsd-kind-class">
						<a href="catpalette.html" class="tsd-kind-icon">Cat<wbr>Palette</a>
						<ul>
							<li class=" tsd-kind-get-signature tsd-parent-kind-class">
								<a href="catpalette.html#slot" class="tsd-kind-icon">slot</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class">
								<a href="catpalette.html#getcolor" class="tsd-kind-icon">get<wbr>Color</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class">
								<a href="catpalette.html#getfillcolor" class="tsd-kind-icon">get<wbr>Fill<wbr>Color</a>
							</li>
							<li class=" tsd-kind-method tsd-parent-kind-class">
								<a href="catpalette.html#getoutlinecolor" class="tsd-kind-icon">get<wbr>Outline<wbr>Color</a>
							</li>
						</ul>
					</li>
				</ul>
				<ul class="after-current">
					<li class=" tsd-kind-class">
						<a href="color.html" class="tsd-kind-icon">Color</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="colorstop.html" class="tsd-kind-icon">Color<wbr>Stop</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="colorstops.html" class="tsd-kind-icon">Color<wbr>Stops</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="contencoding.html" class="tsd-kind-icon">Cont<wbr>Encoding</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="contpalette.html" class="tsd-kind-icon">Cont<wbr>Palette</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="datapoint.html" class="tsd-kind-icon">Data<wbr>Point</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="dataset.html" class="tsd-kind-icon">Data<wbr>Set</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="domain.html" class="tsd-kind-icon">Domain</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="encoding.html" class="tsd-kind-icon">Encoding</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="font.html" class="tsd-kind-icon">Font</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="length.html" class="tsd-kind-icon">Length</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="metainfo.html" class="tsd-kind-icon">Meta<wbr>Info</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="point.html" class="tsd-kind-icon">Point</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="properties.html" class="tsd-kind-icon">Properties</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="renderbase.html" class="tsd-kind-icon">Render<wbr>Base</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="renderreason.html" class="tsd-kind-icon">Render<wbr>Reason</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="segment.html" class="tsd-kind-icon">Segment</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="slot.html" class="tsd-kind-icon">Slot</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="tuple.html" class="tsd-kind-icon">Tuple</a>
					</li>
					<li class=" tsd-kind-class">
						<a href="updateinfo.html" class="tsd-kind-icon">Update<wbr>Info</a>
					</li>
				</ul>
			</nav>
		</div>
	</div>
</div>
<footer>
	<div class="container">
		<h2>Legend</h2>
		<div class="tsd-legend-group">
			<ul class="tsd-legend">
				<li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li>
				<li class="tsd-kind-constructor tsd-parent-kind-class"><span class="tsd-kind-icon">Constructor</span></li>
				<li class="tsd-kind-property tsd-parent-kind-class"><span class="tsd-kind-icon">Property</span></li>
				<li class="tsd-kind-method tsd-parent-kind-class"><span class="tsd-kind-icon">Method</span></li>
				<li class="tsd-kind-accessor tsd-parent-kind-class"><span class="tsd-kind-icon">Accessor</span></li>
			</ul>
			<ul class="tsd-legend">
				<li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited constructor</span></li>
				<li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited property</span></li>
				<li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited method</span></li>
				<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited"><span class="tsd-kind-icon">Inherited accessor</span></li>
			</ul>
			<ul class="tsd-legend">
				<li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected property</span></li>
				<li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected method</span></li>
				<li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected"><span class="tsd-kind-icon">Protected accessor</span></li>
			</ul>
			<ul class="tsd-legend">
				<li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li>
				<li class="tsd-kind-enum-member"><span class="tsd-kind-icon">Enumeration member</span></li>
				<li class="tsd-kind-property tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static property</span></li>
				<li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static"><span class="tsd-kind-icon">Static method</span></li>
			</ul>
		</div>
	</div>
</footer>
<div class="overlay"></div>
<script src="../assets/js/main.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="../assets/js/search.js"><' + '/script>');</script>
</body>
</html>